<template>

	<view class="list-item" style="padding: 0;">

		<view class="m_item">
			<text class="left">头像</text>
			
			<view
				style="display: flex;align-items: center;align-self: flex-end;height: 100upx;width: 100upx;justify-content: space-between;">
				<!-- <u-avatar :src="avatar"></u-avatar> -->
				
				<cropper selWidth="660rpx" selHeight="660rpx" @upload="myUpload" :avatarSrc="avatar"
					avatarStyle="width:40px;height:40px;border-radius:90px;margin-top:4px">
				</cropper>

				<u-icon name="arrow-right"></u-icon>
			</view>

		</view>

		<u-line color="#efefef"></u-line>

		<view class="m_item">
			<text class="left">姓名</text>
			<text class="right">{{userInfo.userName|filterNull}}</text>

		</view>

		<u-line color="#efefef"></u-line>

		<view class="m_item">
			<text class="left">手机号码</text>
			<text class="right">{{userInfo.mobile|filterNull}}</text>

		</view>

		<u-line color="#efefef"></u-line>

		<view class="m_item">
			<text class="left">角色</text>
			<text class="right">{{userInfo.roleNames|filterNull}}</text>

		</view>

		<u-line color="#efefef"></u-line>

		<view class="m_item">
			<text class="left">所属公司</text>
			<text class="right">{{userInfo.deptName|filterNull}}</text>

		</view>

		<u-line color="#efefef"></u-line>

		<view class="m_item" @click="updatepsd">
			<text class="left">修改登录密码</text>

			<u-icon name="arrow-right"></u-icon>
		</view>

	</view>

</template>

<script>
	import get from 'lodash/get';
	import {
		uploadAvatar,
		getUserInfo
	} from '@/api/user-api.js';
	import cropper from "@/components/mine/cropper.vue";

	export default {
		data() {
			return {
			}
		},
		components: {
			cropper
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo;
			},
			avatar() {
				return get(this.userInfo, 'avatar',
					'https://img2.baidu.com/it/u=304846655,1860504905&fm=26&fmt=auto');
			},
		},
		methods: {
			//上传返回图片
			myUpload(rsp) {
				this.upload(rsp.path)
			},

			// chooseimg() {
			// 	let that = this;
			// 	uni.chooseImage({
			// 		sourceType: ['album', 'camera'],
			// 		success(res) {
			// 			that.upload(res.tempFilePaths[0]);
			// 			console.log(res.tempFilePaths);
			// 		}
			// 	})
			// },

			updatepsd() {
				uni.navigateTo({
					url: '/pagesB/updatepsd/updatepsd'
				})
			},

			upload(path) {
				uni.showLoading({
					title: '上传中'
				})

				uploadAvatar({
					filePath: path
				}).then(res => {
					console.log('aaaa', res);

					getUserInfo().then(res1 => {
						if (!uni.$u.test.isEmpty(res1)) {
							this.$store.commit('user/saveUserInfo', res1.data);
							uni.setStorageSync('userInfo', res1.data);

						}
						uni.hideLoading()
					}).catch(e => {
						uni.hideLoading()
					})
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.m_item {
		display: flex;
		align-items: center;
		height: 100upx;
		margin: 0 40upx;
		justify-content: space-between;

		.left {
			font-size: 28upx;
			color: $graya7;
		}

		.right {
			font-size: 28upx;
			color: $black33;
		}
	}
</style>
